<!--编辑审批节点列表-->
<template>
  <el-drawer v-model="visible" :with-header="false" size="40%" :close-on-click-modal="false">
    <div class="add-approve-flow">
      <div class="add-approve-flow-content">
        <div class="header">
          <div class="header-block"></div>
          <div class="header-title">设置审批流程</div>
        </div>
        <ApproveFlowAxis :flow-list="form.processNodeList"/>
        <div class="add-approve-flow-remark">
          <span>备注</span>
          <el-input v-model="form.remark" type="textarea" rows="4" placeholder="请输入备注"/>
        </div>

        <div class="header">
          <div class="header-block"></div>
          <div class="header-title">历史审批流程</div>
        </div>
        <el-table :data="historyProceeTable" head>
          <el-table-column width="60">
            <template v-slot="{row}">
              <el-radio v-model="form.id" :label="row.processInfo.id" @change="selectHistory(row)">{{''}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="序号" prop="index" width="60">
            <template v-slot="{$index}">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="审批节点" prop="num" min-width="100" :formatter="approveNodesFormatter"/>
          <el-table-column label="涉及人员" prop="relateApprove" min-width="60" :formatter="relateApproverFormatter"/>
          <el-table-column label="备注" prop="processInfo.remark" min-width="120" maxlength="500" show-word-limit/>
        </el-table>
      </div>
      <div class="operate-row">
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>

import ApproveFlowAxis from "@/views/construction/project-application/componens/ApproveFlowAxis";
import {getProcessInfoHistory} from "@/api/construction-project/projectManage";
import store from "@/store";

export default {
  name: "AddApproveFlow",
  components: {ApproveFlowAxis},
  props: {},
  data() {
    return {
      visible: false,
      historyProceeTable: [],
      form: {
        processNodeList: []
      },
      selectedHistory: undefined // 用来判断是否修改历史流程内容
    }
  },
  computed: {
    userInfo() {
      return store.state.user.userInfo
    },
  },
  methods: {
    selectHistory(row) {
      row.processNodes.forEach((item, index) => {
        item.nodeContent.isCommonly = item.isCommonly
        item.nodeContent.nodeType = item.isCommonly
        item.nodeContent.isCustom = 0
      })
      const selectedHistory = row.processInfo
      selectedHistory.processNodeList = row.processNodes
      this.selectedHistory = JSON.stringify(selectedHistory)
      this.form = selectedHistory
    },
    open({resolve}) {
      this.visible = true
      this.resolve = resolve
      this.form = {
        processNodeList: []
      }
      let userForm = {
        id: this.userInfo.userId,
        name: this.userInfo.name,
        organId: this.userInfo.organId,
        organName: this.userInfo.organName,
      }
      getProcessInfoHistory(userForm).then(res => {
        this.historyProceeTable = res.data
      })
    },
    approveNodesFormatter(val1, val2, val3) {
      return val1.processNodes?.length
    },
    relateApproverFormatter(val1) {
      let userList = []
      val1.processNodes?.forEach(item => {
        if (item?.nodeContent?.formContent) {
          userList.push(...Object.values(item.nodeContent?.formContent))
        }
      })
      return userList.join(',')
    },
    handleConfirm() {
      // 选择的历史流程未编辑
      if (this.selectedHistory === JSON.stringify(this.form)) {
        let find = this.historyProceeTable.find(item => item.processInfo.id === this.form.id)
        this.resolve(find.processInfo)
      } else {
        delete this.form.id
        let {processNodeList} = this.form
        if (!processNodeList.length || (processNodeList.length % 2) === 1) {
          return this.$message.error('请设置闭合的审批节点')
        }
        for (let i = 0; i< processNodeList.length;i++) {
          let item = processNodeList[i]
          if (!item.nodeContent.formContent || !Object.keys(item.nodeContent.formContent).length) {
            return this.$message.error('请选择审批人员')
          }
        }
        this.resolve(this.form)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.add-approve-flow {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .add-approve-flow-content {
    flex: 1;
    overflow: auto;
    padding: 10px 10px 50px 10px;

    .header {
      display: flex;
      align-items: center;

      .header-block {
        height: 20px;
        width: 5px;
        background: #337ECA;
        margin-right: 10px;
      }

      .header-title {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .add-approve-flow-remark {
      display: flex;
      margin: 40px 0;

      & span {
        white-space: nowrap;
        margin-right: 10px;
      }
    }
  }

  .operate-row {
    height: 50px;
    padding-top: 10px;
    border-top: 1px solid #d7d7d7;
    background: white;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

}
</style>
